<!-- templates/home.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RP Flask REST API</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
    <h1>
        Hello, People!
    </h1>
    <ul>
        {% for person in people %}
        <li>{{ person.name }} {{ person.duty }} {{ person.role }}</li>
        {% endfor %}
    </ul>

    <h2 id="t"></h2>

    <ul id="messages"></ul>
    <input type="text" id="myMessage">
    <button id="sendbtn">Send</button>
    <ul>
    <button id="acquisitionstart">开始采集</button>
    <button id="acquisitionend">停止采集</button>
    <button id="image_display">图像显示测试</button>
    <img src="">
    </ul>
    <script>
    $(document).ready(function(){
        var socket = io.connect("http://127.0.0.1:5000");

        // connect event
        socket.on("connect", function(){
            socket.send("User has connected!");
        });

        socket.on("message", function(msg){
            $("#messages").append("<li>" + msg + "</li>");
        });

        $("#sendbtn").on("click", function(){
            socket.send($("#myMessage").val());
            $("#myMessage").val("");    
        });

        $("#acquisitionstart").on("click", function(){
            socket.emit("acquisition_start", "acquisition starts!");
        });

        $("#acquisitionend").on("click", function(){
            socket.emit("acquisition_end", "acquisition ends!");
        });

        $("#image_display").on("click", function(){
            socket.emit("image_display_test", "image display test");
        });

        // receive reconstructed images
        socket.on("image_reconstructed", function(result){
                elements = document.getElementsByTagName('img');
                elements[0].src = result;
                console.log("received reconstructed image!");
        });

        // image display test
        socket.on("display_image", function(result){
                var blob = new Blob([result], { type: "image/png" });
                var url = URL.createObjectURL(blob);
                elements = document.getElementsByTagName('img');
                elements[0].src = url;
                console.log("received image for display testing!");
        });
    });

    // function acquisition_start(){};
    </script>

</body>
</html>